<template>
  <div style="height: 100%;">
    <header>
      <div class="top">
        <Row  :gutter="10">
        <Col v-for="tag in tags" style="height:100%" span="6">
            <div class="top-tag">{{tag}}</div>
        </Col>
        </Row>
      </div>
    </header>
    <Row  style="height: 108rem;">
          <chart-map style="height: 108rem;width:100%" ></chart-map>
    </Row>
  <div class="box-center">
     <div class="left-info">
     <div class="box">
        <div class="top">
           <Input class="search-box"  placeholder="请输入小区名称" />
           <Button size='default' style="backgroun-color:#022ad6" type="primary">搜索</Button>
        </div>
        <div class="center">
          <div class="cen-top">
           <div style="text-align: center;">
              <span>小区名称 ： </span>
            <span> 海风雅居</span>
           </div>
          </div>
          <div class="cen-down">
            <div>
              <span style="width:100%; text-align: center;display: block;">服务店A </span>
            </div>
          </div>
        </div>
        <div class="down">
          <div class="down-top">
           <div style="text-align: center;">
              <span>日回收量 ： </span>
              <span> 89KG</span>
           </div>
          </div>
          <div class="down-down">
            <div style="text-align: center;">
              <span>周回收量 ： </span>
              <span> 89KG</span>
           </div>
          </div>
        </div>
     </div>
   </div>
    <div class="left-line">
          <chart-line style="height:100%" ></chart-line>
   </div>
    <div class="right-line">
         <chart-line style="height:100%"></chart-line>
   </div>
   <div class="pie">
         <div class="pie-box">
            <chart-pie style="height: 100%;" :value="pieData" text="用户访问来源"></chart-pie>
         </div>
   </div>
  </div>
   <div class="bottom">
     <div class="bot-box">
        <Row  :gutter="20" style="height: 100%;width:90%;margin-left: 5%;">
        <Col v-for="title in titles" style="height:100%" span="4">
            <div class="bot-tag">
              <div class="top">
                <span>{{title}}</span>
              </div>
              <div class="down">
                <img src="../../../assets/images/video.png" alt="">
              </div>
            </div>
        </Col>
        </Row>
     </div>
     <div class="side">
        <div class="side-top">
          <span>产看更多</span>
        </div>
        <div class="side-down"></div>
     </div>
   </div>
  </div>
</template>
<style lang="less">
.ivu-card-body {
  padding: 0;
}
</style>

<script>
import './home.less'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar, ChartMap, ChartLine } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    ChartMap,
    ChartLine,
    Example
  },
  data() {
    return {
      titles: ['视频检测点A', '视频检测点A', '视频检测点A', '视频检测点A', '视频检测点A', '视频检测点A'],
      tags: ['首页', '数据列表', '数据分析', '站点列表'],
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  },
  mounted() {
    //
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
